<template>
  <div>
    <div class="tip-div" style="justify-content: space-around; margin: 5px 0">
      <t-button size="small" @click="resetColumns"> 重置 </t-button>
      <t-tooltip theme="danger">
        <template #content>
          <div>1.鼠标长按可以拖动列的位置</div>
          <div>2.点击左侧框可控制列是否显示</div>
          <div>3.点击右侧开关可控制列是否固定</div>
        </template>
        <div class="tip-div">
          <li>说明&nbsp;</li>
          <InfoCircleIcon />
        </div>
      </t-tooltip>
      <t-button size="small" @click="submitColumns"> 确定 </t-button>
    </div>
    <VueDraggableNext
      v-model="list"
      class="list-group"
      tag="ul"
      v-bind="{
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost',
      }"
      @start="onStart"
      @end="onEnd"
    >
      <li v-for="element in list" :key="element.order" class="list-group-item">
        <t-checkbox
          v-model="element.check"
          :value="element.name"
          @change="changeCheckStatus"
        >
          {{ element.name }}
        </t-checkbox>
        <span class="t_switch"
          ><t-switch
            v-model="element.isFixed"
            @change="changeSwitch($event, element.name)"
        /></span>
      </li>
    </VueDraggableNext>
  </div>
</template>
<script setup lang="ts">
import { VueDraggableNext } from "vue-draggable-next";
import { ref, PropType, watch } from "vue";
import { COLUMNS_SHOW_FORMAT } from "../type";
import { InfoCircleIcon } from "tdesign-icons-vue-next";
const props = defineProps({
  columnsList: {
    type: Array as unknown as PropType<COLUMNS_SHOW_FORMAT[]>,
    required: true,
  },
});
const emits = defineEmits([
  "changeCloumnsConfig",
  "resetColumns",
  "submitColumns",
]);
const list = ref<COLUMNS_SHOW_FORMAT[]>([]);
watch(
  () => {
    return props.columnsList;
  },
  (newVal, oldVal) => {
    list.value = newVal.map((item, index) => ({
      name: item.name,
      check: item.check,
      isFixed: item.isFixed,
    }));
  },
  { immediate: true, deep: true }
);
const resetColumns = () => {
  emits("resetColumns");
};
const submitColumns = () => {
  emits("submitColumns");
};
// 更改列显示隐藏
const changeCheckStatus = (val: boolean, { e }: { e: any }) => {
  list.value.forEach((item) => {
    if (item.name === e.target._value) {
      item.check = val;
    }
  });

  emits("changeCloumnsConfig", list.value);
};
// 更改列是否固定
const changeSwitch = (val: any, name: string) => {
  list.value.forEach((item) => {
    if (item.name === name) {
      item.isFixed = val;
    }
  });
  emits("changeCloumnsConfig", list.value);
};
// 拖拽开始的事件
const onStart = (e: Event) => {
  console.log("开始拖拽", e);
};

// 拖拽结束的事件
const onEnd = () => {
  console.log("结束拖拽");
  emits("changeCloumnsConfig", list.value);
};
</script>
<style lang="less" scoped>
ul,
dl,
li,
dd,
dt {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tip-div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.list-group {
  min-height: 20px;
  max-height: 400px;
  overflow-y: auto;
  list-style: none;

  &::-webkit-scrollbar {
    width: 4px;
  }
}

.list-group-item {
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;

  .t_switch {
    margin-left: 10px;
  }
}
</style>
